<template>
  <div class="expert-exit-container">
    <!-- 基本视图 - 列表部分 -->
    <div v-show="basicvisible">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>专家出库管理</h2>
      </div>

      <!-- 专家出库信息列表 -->
      <div class="expert-list-container">
        <el-card class="box-card">
          <div slot="header" class="card-header">
            <span>专家出库信息列表</span>
            <div class="header-actions">
              <!-- 恢复按钮已移除 -->
            </div>
          </div>

          <!-- 表格 -->
          <el-table
            ref="expertTable"
            v-loading="loading"
            :data="expertList"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
              align="center"
            />
            <el-table-column
              label="序号"
              type="index"
              width="80"
              align="center"
            />
            <el-table-column
              prop="id"
              label="ID"
            />
            <el-table-column
              prop="name"
              label="专家姓名"
            />
            <el-table-column
              prop="reason"
              label="出库原因"
            />
            <el-table-column
              prop="outTime"
              label="出库时间"
              :formatter="dateFormatter"
            />
            <el-table-column
              label="操作"
              width="280"
              align="center"
              v-if="role != 'lEADER' && role != 'DEPT' && role != 'CENTER'" 
            >
              <template slot-scope="scope">
                <el-button
                  type="info"
                  size="mini"
                  icon="el-icon-view"
                  @click="handleView(scope.row)"
                  class="operation-btn view-btn"
                >
                  查看
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-refresh"
                  @click="handleRestoreConfirm(scope.row)"
                  class="operation-btn restore-btn"
                >
                  恢复
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  class="operation-btn delete-btn"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            />
          </div>
        </el-card>
      </div>
    </div>
    
    <!-- 编辑视图 - 详情部分 -->
    <div v-show="editvisibale">
      <el-page-header title="返回" @back="back2" content="查看" style="line-height: 50px; border-radius: 5px; background-color: #ffffff;">
      </el-page-header>
      <editblock :row="row"></editblock>
    </div>

    <!-- 删除确认对话框 -->
    <el-dialog
      title="确认删除"
      :visible.sync="deleteDialogVisible"
      width="30%"
      center
    >
      <div class="delete-dialog-content">
        <i class="el-icon-warning-outline warning-icon"></i>
        <p>确定要删除该专家的所有信息吗？此操作不可恢复！</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 恢复确认对话框 -->
    <el-dialog
      title="确认恢复"
      :visible.sync="restoreDialogVisible"
      width="30%"
      center
    >
      <div class="delete-dialog-content">
        <i class="el-icon-warning-outline warning-icon"></i>
        <p>确定要恢复该专家的信息吗？此操作不可撤销！</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="restoreDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRestore">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import editblock from '../table/view.vue'
import { getExpertById,getExpertAttach, outlibrarys, reinlibrary, deleteexpertbyid, getExpertReviews, getExpertReviewsByName } from '@/api/table'
export default {
  name: 'ExpertExit',
  components: {
    editblock
  },
  data() {
    return {
      editvisibale:false,
      basicvisible:true,
      role:'',
      // 添加与table页面一致的数据结构
      row:{
        // 基本信息
        id: '',
        expertId: '',
        name: '',
        gender: '',
        age: '',
        workUnit: '',
        title: '',
        education: '',
        primaryMajor: '',
        reason: '',
        outTime: '',
        job: '',
        // 附件信息
        attachmentIds: {
          idCard: '',
          certificate: '',
          qualification: '',
          supportMater: '',
          applicationForm: ''
        },
        // 工作经历
        workExperience: [],
        // 社会兼职
        socialExperience: [],
        // 其他信息
        otherInfo: {
          researchAchievements: '',
          projectMatters: '',
          id: '',
          expertId: '',
          createTime: '',
          updateTime: ''
        }
      },
      loading: false,
      expertList: [], // 专家列表数据
      selectedExperts: [], // 选中的专家
      currentPage: 1,
      pageSize: 10,
      total: 0,
      deleteDialogVisible: false,
      currentDeleteExpert: null, // 当前要删除的专家
      restoreDialogVisible: false, // 恢复弹窗
      currentRestoreExpert: null, // 当前要恢复的专家
      searchForm: {
        expertName: '',
        title: '',
        major: [], 
        gender: '',
        ageStart: '',
        ageEnd: '',
        auditStatus: '',
        auditOffice: ''
      },
      titleOptions: [
        { value: "副高级职称", label: "副高级职称" },
        { value: "正高级职称", label: "正高级职称" },
        { value: "同等执业资格", label: "同等执业资格" },
        { value: "其他", label: "其他" }
      ],
      majorOptions: [
        { value: "建设管理", label: "建设管理" },
        { value: "计划管理", label: "计划管理" },
        { value: "质量管理", label: "质量管理" },
        { value: "水利规划", label: "水利规划" },
        { value: "水文泥沙", label: "水文泥沙" },
        { value: "水资源", label: "水资源" },
        { value: "节水评价", label: "节水评价" },
        { value: "水土保持", label: "水土保持" },
        { value: "农田水利", label: "农田水利" },
        { value: "城乡供水", label: "城乡供水" },
        { value: "水工结构", label: "水工结构" },
        { value: "河道治理", label: "河道治理" },
        { value: "工程地质与工程测绘", label: "工程地质与工程测绘" },
        { value: "水旱灾害防御抢险", label: "水旱灾害防御抢险" },
        { value: "工程造价与经济评价", label: "工程造价与经济评价" },
        { value: "征地移民", label: "征地移民" },
        { value: "电气机电与金属结构", label: "电气机电与金属结构" },
        { value: "水利政策法规", label: "水利政策法规" },
        { value: "施工组织与管理", label: "施工组织与管理" },
        { value: "水利信息化", label: "水利信息化" },
        { value: "工程管理", label: "工程管理" },
        { value: "节能评价", label: "节能评价" },
        { value: "资金管理", label: "资金管理" },
        { value: "水力发电", label: "水力发电" },
        { value: "劳动安全与工业卫生（安全生产）", label: "劳动安全与工业卫生（安全生产）" },
        { value: "环境影响评价", label: "环境影响评价" },
        { value: "社会稳定分析", label: "社会稳定分析" },
        { value: "质量检测", label: "质量检测" },
        { value: "水文化", label: "水文化" }
      ],
      auditStatusOptions: [
        { value: '未审核', label: '未审核' },
        { value: '已审核入库', label: '已审核入库' },
        { value: '审核不通过', label: '审核不通过' }
      ],
      officeOptions: [
        { value: '建监处', label: '建监处' },
        { value: '水保处', label: '水保处' },
        { value: '农水处', label: '农水处' },
        { value: '水资源处', label: '水资源处' },
        { value: '移民处', label: '移民处' },
        { value: '河湖处', label: '河湖处' },
        { value: '节水办', label: '节水办' },
        { value: '规计处', label: '规计处' },
        { value: '财审处', label: '财审处' },
        { value: '防御处', label: '防御处' },
      ],
      // 学历选项
      educationOptions: [
        {
          value: "博士研究生",
          label: "博士研究生",
        },
        {
          value: "硕士研究生",
          label: "硕士研究生",
        },
        {
          value: "大学本科",
          label: "大学本科",
        },
        {
          value: "大学专科",
          label: "大学专科",
        },
        {
          value: "高中/中专",
          label: "高中/中专",
        },
        {
          value: "初中及以下",
          label: "初中及以下",
        },
      ],
      // 新增相关数据
      addDialogVisible: false,
      addForm: {
        expertName: '',
        gender: '',
        education: '',
        age: null,
        position: '',
        major: [],
        unit: '',
        title: '',
        entryTime: '',
        reviewCount: 0,
        projectChangeCount: 0
      },
      addRules: {
        expertName: [
          { required: true, message: '请输入专家姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        education: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请输入职位', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请选择专业', trigger: 'change' }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请选择职称', trigger: 'change' }
        ],
        entryTime: [
          { required: true, message: '请选择入库时间', trigger: 'change' }
        ],
        reviewCount: [
          { required: true, message: '请输入参与评审会次数', trigger: 'blur' },
          { type: 'number', message: '次数必须为数字值', trigger: 'blur' }
        ],
        projectChangeCount: [
          { required: true, message: '请输入参与项目出现变更次数', trigger: 'blur' },
          { type: 'number', message: '次数必须为数字值', trigger: 'blur' }
        ]
      },
      // 导出相关数据
      exportDialogVisible: false,
      exportForm: {
        format: 'excel',
        scope: 'current'
      },
      // 删除相关数据
      deleteForm: {
        selectedIds: []
      },
      selectedRows: [],
      // API配置
      apiConfig: {
        baseUrl: process.env.VUE_APP_BASE_API || '',
        useMock: false // 切换真实API时设为false
      },
      storageDialogVisible: false,
      isStoraging: false,
      storageProgress: 0,
      storageComplete: false,
      storageStatus: '',
      successCount: 0,
      failCount: 0,
      failList: [],
      auditDialogVisible: false,
      batchAuditStatus: '已审核入库',
      rejectReason: '',
      showRejectReason: false,
      viewDialogVisible: false,
      viewForm: {},
      reviewRecords: [],
      activeTab: 'basic',
      withdrawalDialogVisible: false,
      withdrawalReason: '',
      labelWidth: '18%', // 使用百分比自适应label宽度
      layout: 'total, sizes, prev, pager, next, jumper'
    }
  },
  mounted() {
    this.role = sessionStorage.getItem('role')
    this.getExpertExitList();
  },
  methods: {
    back2(){
      this.editvisibale = false
      this.basicvisible = true
    },
    // 查看专家详情（获取完整信息）
    handleView(row) {
      this.editvisibale = true
      this.basicvisible = false
      console.log('查看专家信息 - 完整行数据:', row);
      console.log('专家ID信息:', row.expertId);
      // 设置当前行的ID
      this.row = {
        ...this.row,
        id: row.expertId,
        //expertId: row.expertId
      };
      console.log('row.id:', this.row.id);

      // 获取专家详细信息
      getExpertById(this.row.id).then(response => {
        console.log('接口',typeof getExpertById);
        console.log('id:', this.row.id);
        console.log('getExpertById API响应:', response);
        if (response && response.code === 200 && response.data) {
          //const originalData = row.id;
          // 完整的专家信息
          this.row = response.data;
          //this.row.id = originalData;
          console.log('11111:', this.row.expertId);
          // 保留出库特有信息
          this.row.reason = row.reason || '';
          this.row.outTime = row.outTime || '';
          
          // 确保 expertId 被正确设置，这对后续 API 调用至关重要
          // if (!this.row.id && row.id) {
          //   console.log('API返回数据中缺少expertId，使用行数据中的expertId');
          //   this.row.expertId = row.id;
          // }
          this.row = {
                ...this.row,
                expertId: this.row.expertId,
            };
          console.log('row.expertId:', this.row.expertId);

          // 获取专家附件信息
          getExpertAttach(this.row.expertId).then(attachResponse => {
            console.log('获取到的附件信息:', attachResponse);
            if (attachResponse.code === 200 && attachResponse.data) {
              const attachData = attachResponse.data;
              // 存储附件ID信息
              const fileIds = {
                idCard: attachData.idCard,
                certificate: attachData.certificate,
                qualification: attachData.qualification,
                supportMater: attachData.supportMater,
                applicationForm: attachData.applicationForm
              };
              console.log('提取的文件ID:', fileIds);
              
              // 将文件ID信息添加到row中
              this.$set(this.row, 'attachmentIds', fileIds);
            } else {
              console.warn('未获取到附件信息或返回错误:', attachResponse);
            }
          }).catch(error => {
            console.error('获取附件信息失败:', error);
          });
          
          // 获取工作经历和其他信息
          if (this.row.expertId) {
            console.log('使用expertId获取工作经历等信息:', this.row.expertId);
            this.getWorkExperience(this.row.expertId);
            this.getSocialPart(this.row.expertId);
            this.getOtherInfo(this.row.expertId);
            
            // 获取专家评审会信息
            this.getExpertReviewsInfo(this.row.expertId);
          } else {
            console.error('专家ID不存在，无法获取工作经历等信息');
          }
        } else {
          console.error('getExpertById API返回错误或无数据:', response);
          this.$message.error('获取专家详细信息失败');
        }
      }).catch(error => {
        console.error('获取专家详细信息失败:', error);
        this.$message.error('获取专家详细信息失败');
      });
    },
         
    // 获取工作经历
          getWorkExperience(expertId) {
      console.log('获取工作经历，专家ID:', expertId);
      this.$http.get(`/admin/expertWorkExper/get/${expertId}`).then(response => {
        console.log('工作经历数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const mappedExperience = response.data.map(item => ({
            workUnit: item.orgName || '',
            startTime: item.startDate || '',
            endTime: item.endDate || '',
            jobTitle: item.title || '',
            jobDuty: item.position || '',
            id: item.id,
            expertId: item.expertId
          }));
          console.log('映射后的工作经历:', mappedExperience);
          this.$set(this.row, 'workExperience', mappedExperience);
        }
      }).catch(error => {
        console.error('获取工作经历失败:', error);
        this.$message.error('获取工作经历失败');
      });
    },
    
    // 获取社会兼、聘职情况
    getSocialPart(expertId) {
      console.log('获取社会兼职情况，专家ID:', expertId);
      this.$http.get(`/admin/expertSocialPart/get/${expertId}`).then(response => {
        console.log('社会兼职数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const mappedSocialPart = response.data.map(item => ({
            partTimeUnit: item.orgName || '',
            startTime: item.startDate || '',
            endTime: item.endDate || '',
            role: item.role || '',
            id: item.id,
            expertId: item.expertId
          }));
          console.log('映射后的社会兼职:', mappedSocialPart);
          this.$set(this.row, 'socialExperience', mappedSocialPart);
        }
      }).catch(error => {
        console.error('获取社会兼职情况失败:', error);
        this.$message.error('获取社会兼职情况失败');
      });
    },
    
    // 获取其他信息
    getOtherInfo(expertId) {
      console.log('获取专家其他信息，专家ID:', expertId);
      this.$http.get(`/admin/expertOtherInfo/get/${expertId}`).then(response => {
        console.log('其他信息数据:', response.data);
        if (response && response.data) {
          // 映射后端字段到前端字段
          const otherInfo = {
            researchAchievements: response.data.researchResults || '',
            projectMatters: response.data.projectConsultation || '',
            id: response.data.id,
            expertId: response.data.expertId,
            createTime: response.data.createTime,
            updateTime: response.data.updateTime
          };
          console.log('映射后的其他信息:', otherInfo);
          this.$set(this.row, 'otherInfo', otherInfo);
        }
      }).catch(error => {
        console.error('获取其他信息失败:', error);
        this.$message.error('获取其他信息失败');
      });
    },
    
    // 获取专家出库列表
    getExpertExitList(params = { page: 1, pageSize: 10 }) {
      this.loading = true;
      outlibrarys({
        page: this.currentPage,
        pageSize: this.pageSize,
        ...params
      }).then(response => {
        if (response.code === 200 && response.data) {
          this.expertList = response.data || [];
          this.total = response.data.length || 0;
        } else {
          this.expertList = [];
          this.total = 0;
          this.$message.warning(response.message || '获取数据失败');
        }
        this.loading = false;
      }).catch((error) => {
        console.error('获取专家出库列表失败:', error);
        this.$message.error('获取专家出库列表失败');
        this.loading = false;
        this.expertList = [];
        this.total = 0;
      });
    },
    // 处理选择变化
    handleSelectionChange(selection) {
      this.selectedExperts = selection;
    },
    // 处理删除
    handleDelete(row) {
      console.log(row.expertId);
      this.currentDeleteExpert = row;
      this.deleteDialogVisible = true;
    },
    // 确认删除
    async confirmDelete() {
      try {
        // await new Promise(resolve => setTimeout(resolve, 500));
        deleteexpertbyid([this.currentDeleteExpert.expertId]).then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功')
            this.deleteDialogVisible = false;
            this.getExpertExitList(); // 重新加载数据
          }
        })
        // this.$message.success('删除成功');

      } catch (error) {
        this.$message.error('删除失败');
      }
    },
    // 专家出库恢复方法，传入专家出库列表的id
    async getreinlibrary(outLibraryId) {
      try {
        this.loading = true;
        // 调用后端恢复接口，传递专家ID
        const response = await reinlibrary(this.currentRestoreExpert.expertId);
        console.log('恢复接口响应:', response);

        if (response.code === 200 || response.code === 201) {
          this.$message({
            type: 'success',
            message: '专家信息已恢复',
            duration: 2000
          });
          // 直接重新获取列表数据
          await this.getExpertExitList({
            page: this.currentPage,
            pageSize: this.pageSize
          });
        } else {
          this.$message.error(response.message || '恢复失败，请稍后重试');
        }
      } catch (error) {
        console.error('恢复接口调用失败:', error);
        this.$message.error('恢复失败，请稍后重试');
      } finally {
        this.loading = false;
        this.restoreDialogVisible = false;
      }
    },
    // 处理恢复按钮点击（弹窗）
    handleRestoreConfirm(row) {
      if (!row.expertId) {
        this.$message.error('未获取到专家ID');
        return;
      }
      this.currentRestoreExpert = row;
      this.restoreDialogVisible = true;
    },
    // 确认恢复
    async confirmRestore() {
      if (!this.currentRestoreExpert || !this.currentRestoreExpert.expertId) {
        this.$message.error('未获取到专家ID');
        return;
      }
      await this.getreinlibrary(this.currentRestoreExpert.expertId);
    },
    // 分页相关方法
    handleSizeChange(size) {
      this.pageSize = size;
      this.getExpertExitList();
    },

    handleCurrentChange(page) {
      this.currentPage = page;
      this.getExpertExitList({page: page, pageSize: 10});
    },
    
    // 获取专家评审会信息
    getExpertReviewsInfo(userId) {
      if (!userId) {
        console.log('跳过评审会数据请求：没有expertId');
        return;
      }
      
      console.log('开始请求专家评审会信息，expertId:', userId);
      
      // 使用expertId获取评审会信息
      getExpertReviews(userId).then(response => {
        console.log('使用expertId获取评审会数据响应:', response);
        if (response && response.code === 200 && response.data && response.data !== "所选专家不存在") {
          // 使用Vue.set确保响应式更新
          this.$set(this.row, 'reviewMeetings', response.data);
          console.log('评审会数据设置成功:', this.row.reviewMeetings);
        } else {
          console.log('未获取到评审会数据，设置为空数组');
          this.$set(this.row, 'reviewMeetings', []);
        }
      }).catch(error => {
        console.error('获取评审会信息失败:', error);
        this.$set(this.row, 'reviewMeetings', []);
      });
    },
    // 日期格式化函数，只显示日期部分
    dateFormatter(row, column) {
      if (!row.outTime) return '';
      // 处理日期格式，只返回年月日
      const date = new Date(row.outTime);
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
  }
}
</script>

<style lang="less" scoped>
.expert-exit-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;

  @media screen and (max-width: 768px) {
    padding: 10px;
  }

  .page-header {
    margin-bottom: 20px;
    
    h2 {
      font-size: 24px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0;
      
      @media screen and (max-width: 768px) {
        font-size: 20px;
        margin: 10px 0;
      }
    }
  }

  .expert-list-container {
    .box-card {
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      margin-bottom: 20px;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 10px;
      }

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        @media screen and (max-width: 768px) {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
          
          .header-actions {
            width: 100%;
            
            .el-button {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .el-table {
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;

    @media screen and (max-width: 1200px) {
      font-size: 14px;
    }

    @media screen and (max-width: 768px) {
      font-size: 12px;
      
      .el-table__header-wrapper,
      .el-table__body-wrapper {
        overflow-x: auto;
      }
      
      .cell {
        padding: 8px;
      }
      
      .el-button--mini {
        padding: 5px 10px;
      }
    }

    /deep/ th {
      background-color: #f5f7fa !important;
      color: #606266;
      font-weight: 600;
      padding: 12px 0;
    }

    /deep/ .el-table__row {
      transition: all 0.3s;

      &:hover > td {
        background-color: #f5f7fa;
      }
    }
  }

  .pagination-container {
    padding: 20px 0;
    text-align: right;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    
    @media screen and (max-width: 768px) {
      justify-content: center;
      
      .el-pagination {
        .el-pagination__sizes {
          display: none !important;
        }
      }
    }
  }

  .delete-dialog-content {
    text-align: center;
    padding: 20px 0;

    .warning-icon {
      font-size: 48px;
      color: #e6a23c;
      margin-bottom: 15px;
      
      @media screen and (max-width: 768px) {
        font-size: 36px;
        margin-bottom: 10px;
      }
    }

    p {
      margin: 0;
      color: #606266;
      font-size: 16px;
      
      @media screen and (max-width: 768px) {
        font-size: 14px;
      }
    }
  }

  .el-button {
    padding: 8px 15px;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.3s;
    margin: 0 5px;

    &.operation-btn {
      min-width: 76px;
    }

    &.view-btn {
      background: linear-gradient(135deg, #909399 0%, #606266 100%);
      color: #fff;
      border: none;
      box-shadow: 0 2px 6px rgba(144, 147, 153, 0.2);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(144, 147, 153, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }

    &.restore-btn {
      background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
      border: none;
      box-shadow: 0 2px 6px rgba(64, 158, 255, 0.2);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }

    &.delete-btn {
      background: linear-gradient(135deg, #f56c6c 0%, #e64242 100%);
      border: none;
      box-shadow: 0 2px 6px rgba(245, 108, 108, 0.2);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }

  .el-dialog {
    @media screen and (max-width: 992px) {
      width: 80% !important;
    }
    
    @media screen and (max-width: 768px) {
      width: 95% !important;
      margin: 10px auto !important;
      
      .el-dialog__body {
        padding: 15px;
      }
      
      .dialog-footer {
        .el-button {
          width: 100%;
          margin: 5px 0;
        }
      }
    }
  }
}
</style> 